import React, { useState } from 'react';
import { Modal } from 'antd';
import { useFullscreen } from 'ahooks';
import TRNotification from '#/utils/notification.js';
//@ts-ignore
import { FullscreenOutlined, FullscreenExitOutlined } from '#/utils/antdIcons';
import videoBg from '@/assets/helper/video_bg.png';
import { IFileType } from '../../../type';
import { USER_DATA } from '../../../tool';
import styles from './index.less';

interface IProps {
  /**
   * 预览链接地址
   */
  preurl: string;
  /**
   * 文件类型
   */
  showFileType?: IFileType;
  currentUser?: any;
  onPress: (data: Record<string, any>) => void;
}

const PlayModalComponent = (props: IProps) => {
  const { onPress, preurl, showFileType, currentUser } = props;
  const [visible, setVisible] = useState<boolean>(true);
  const [isFullscreen, { enterFullscreen, exitFullscreen }] = useFullscreen(() =>
    document.getElementById('file-container'),
  );

  // 取消按钮
  const _onCancel = async () => {
    setVisible(false);
    onPress({ index: 0 });
  };

  return (
    <Modal
      className={styles.modal}
      centered
      width={672}
      maskClosable={false}
      visible={visible}
      onCancel={_onCancel}
      footer={null}
    >
      <div className={styles.container}>
        {showFileType === IFileType.VIDEO && (
          <div className={styles.video}>
            <video
              height={'100%'}
              width={'100%'}
              id="video"
              /*视频地址*/
              controls /*是否显示播放控件*/
              poster={videoBg} /*视频封面*/
              preload="auto" /*预加载*/
            >
              <source src={preurl} type="video/mp4" />
              您的浏览器不支持
            </video>
          </div>
        )}
        {showFileType === IFileType.PDF && (
          <div className={styles.preview} id="file-container">
            <div className={styles.preview_title}>
              <span>预览</span>
              {isFullscreen ? (
                <FullscreenExitOutlined
                  className={styles.preview_icon}
                  onClick={() => exitFullscreen()}
                />
              ) : (
                <FullscreenOutlined
                  className={styles.preview_icon}
                  onClick={() => enterFullscreen()}
                />
              )}
            </div>
            <div className={styles.preview_file} id="file-container">
              <div className={styles.file_box}>
                {USER_DATA.map((item) => (
                  <div key={item}>
                    {currentUser?.name || ''}
                    {currentUser?.mobile || ''}
                  </div>
                ))}
              </div>
              {preurl && <iframe src={preurl} frameBorder={0} width={'100%'} height={'100%'} />}
            </div>
          </div>
        )}
      </div>
    </Modal>
  );
};

class PlayModal {
  __key__ = '';

  show = (props: any) => {
    return new Promise((resolve) => {
      if (this.__key__ !== '') return;
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <PlayModalComponent
            {...props}
            onPress={(result: any) => {
              TRNotification.remove(this.__key__);
              this.__key__ = '';
              resolve(result);
            }}
          />
        ),
        duration: null,
        dismiss: this.dismiss,
      });
    });
  };

  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}

export default new PlayModal();
